<template>
	<!-- 在线客服 -->
	<view class="custmer" v-show="!isSortType">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" @click="licks">
			<view class="pictrue">
				<image :src="logoConfig"></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" v-if="routineContact === 0" >
			<view class="pictrue" @click="licks">
				<image :src="logoConfig"></image>
			</view>
			<view class="liver_class" @click="licks('liver')">
				<image src="@/static/imgs/hover1.png"></image>
			</view>
			<view class="pictrue phone_class" @click="licks('phone')">
				<image src="@/static/imgs/phone.png"></image>
			</view>
		</view>
		<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove"  v-if="routineContact === 1">
			<button class="customerService-sty" open-type='contact'>
				<image class="pictrue" :src="logoConfig"></image>
			</button>
			<view class="liver_class" @click="licks('liver')">
				<image src="@/static/imgs/hover1.png"></image>
			</view>
			<view class="pictrue phone_class" @click="licks('phone')" v-if="phone">
				<image src="@/static/imgs/phone.png"></image>
			</view>
		</view>

		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
			getCustomer
		} from '@/utils/index.js'
	export default {
		name: 'customerService',
		computed: mapGetters(['userInfo']),
		props: {
			phone:{
				type: String,
				default: ''
			},
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isSortType:{
				type: String | Number,
				default:0
			},
			liverUrl:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				routineContact: parseFloat(this.dataConfig.routine_contact_type),
				logoConfig: this.dataConfig.logoConfig.url,
				topConfig: this.dataConfig.topConfig.val?this.dataConfig.topConfig.val>=80?70+'%':this.dataConfig.topConfig.val+'%':'30%',
				positions: this.dataConfig.locationConfig.tabVal
			};
		},
		created() {
		},
		methods: {
			licks(type='liver'){
				console.log(type,"--------");
				if(type=='liver'){
					if(!this.liverUrl) return this.$util.Tips({title:'暂无直播链接'})
					// 跳转直播页面
					this.$util.JumpPath(`/pages/annex/web_view/index??url=${this.liverUrl}`)
					return
				}else if(type=='phone'){
					console.log("打电话");
					uni.makePhoneCall({
						phoneNumber:this.phone
					})
					return
				}
				if (this.dataConfig.buttonConfig.tabVal) {
					getCustomer(`/pages/extension/customer_list/chat`)
				} else{
					this.$util.JumpPath(this.dataConfig.logoConfig.link);
				}
			},
			setTouchMove(e) {
				var that = this;
				if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
					that.topConfig = e.touches[0].clientY+'px'
				}
			},
		}
	}
</script>

<style lang="scss">
  .custmer {
    touch-action: none;
  }
  .customerService{
	  position: relative;
	  .liver_class{
		  position: absolute;
		  width: 100rpx;
		  height: 142.68rpx;
		  left: -10rpx;
		  top: -170rpx;
		  image{
			  width: 100%;
			  height: 100%;
		  }
	  }
	  .phone_class{
		  position: absolute;
		  
		  
		  bottom: -200rpx;
		  image{
			  width: 100%;
			  height: 100%;
		  }
	  }
  }
	.customerService,.customerService-sty {
		width: 88rpx;
		position: fixed;
		right: 20rpx;
		z-index: 40;
		&.on {
			left:20rpx;
		}
		.pictrue {
			width: 86rpx;
			height: 86rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.customerService-sty{
		background-color: rgba(0,0,0,0) !important;
	}
</style>
